<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2023-10-31 20:13:19
 * @LastEditors: 甯左龙 1173405584@qq.com
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiForm\uiForm.vu
 * CIMC-V2
-->
<template>
  <!--  -->
  <div
    :ref="info._id"
    v-ui-ref="vSetRef"
    class="ui-list w-full flex flex-col"
    :class="['overflow-x-hidden overflow-y-auto scrollbar--light']"
    :style="{
      height: info.extension.height.value,
      background: info.extension.bgColor.value,
      borderColor: info.extension.borderColor.value,
      borderLeft: `${info.extension.borderWidth.value} solid ${info.extension.borderColor.value}`,
      borderTop: `${info.extension.borderWidth.value} solid ${info.extension.borderColor.value}`,
      borderRight: `${info.extension.borderWidth.value} solid ${info.extension.borderColor.value}`,
    }"
  >
    <div
      v-for="(item, index) in lists"
      :key="index"
      class="flex flex-1 items-center"
      :class="info.extension.fontBold && info.extension.fontBold.value ? 'font-semibold' : ''"
      :style="{ borderBottom: `${info.extension.borderWidth.value} solid ${info.extension.borderColor.value}` }"
    >
      <p
        class="flex-none p-2 h-full flex items-center justify-center"
        :style="{
          fontSize: item.labelFontSize,
          color: item.labelColor,
          width: info.extension.labelWidth.value,
          borderRight: `${info.extension.borderWidth.value} solid ${info.extension.borderColor.value}`,
        }"
      >
        {{ item.label }}
      </p>
      <p class="flex-1 p-2" :style="{ fontSize: item.fontSize, color: item.color }">{{ getRequestData[item.field] }}</p>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  import trim from 'lodash/trim'
  import isArray from 'lodash/isArray'
  import merge from 'lodash/merge'
  import isEmpty from 'lodash/isEmpty'
  import { processingConstant, replaseRegVariable } from '@ve/utils/utils'

  export default defineComponent({
    name: 'UiList',
    components: {},
    mixins: [UiMixin, RefsInjectMixin],
    provide() {
      return {
        formId: this.info._id,
        interval: null,
      }
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {
            optionList: [],
          }
        },
      },
    },
    data() {
      return {}
    },
    computed: {
      selfFormData() {
        return this.info.data.formData
      },
      lists() {
        return this.info.extension.optionConfig.value
      },
      getRequestData() {
        return this.info.data.requestData
      },
      getHeight() {
        return this.info.extension.height.value
      },
    },
    watch: {},
    created() {},
    mounted() {
      if (this.hasPreview && this.info.extension.polling && this.info.extension.polling.value) {
        this.interval = setInterval(() => {
          this.requestOptionList()
        }, this.info.extension.polling.value)
      }
    },
    methods: {
      requestOptionList(cb) {
        let requestDataObj = {}
        isArray(this.info.extension.requestData.value) &&
          this.info.extension.requestData.value.forEach((item) => {
            let itemVal = item.value
            if (/#{.*?}/g.test(item.value)) {
              itemVal = replaseRegVariable(itemVal, this.info.data.formData)
            }
            requestDataObj[item.key] = processingConstant(this, itemVal)
          })
        let options = {
          api: this.info.extension.api.value,
          method: this.info.extension.method.value,
          getDataKey: this.info.extension.getDataKey.value,
          data: merge(requestDataObj, this.info.data.formData),
        }
        if (!trim(options.api)) return
        this.request(options, cb)
      },
      request(options = {}, cb = null) {
        let getDataKey = options.getDataKey
        //发起请求
        return request({
          url: GFCD('dams', 'domain') + options.api,
          method: 'post',
          data: {
            data: JSON.stringify(options.data),
            method: options.method,
          },
        }).then((res) => {
          this.info.data.requestData = isEmpty(getDataKey) ? res.data.data[0] || {} : res.data[getDataKey].data[0] || {}
          // 进行回调
          cb && cb(res)
        })
      },
    },
    unmounted() {
      this.interval && clearInterval(this.interval)
    },
  })
</script>

<style>
  .uiList {
    width: 100%;
    flex: 1;
  }
</style>
